<template>
  <div class="we-care-container">
    <section class="we-care-section">
      <div class="section-title">
        <h2>About Us</h2>
        <div class="divider"></div>
      </div>

      <div class="we-care-content">
        <p class="we-care-description">
          LUNRUO's concept for making garments, which is called Cheng-Fashion aesthetic, is a testament of fabrics steeped in sincerity, craftsmanship born of genuine dedication, and pricing that reflects honesty. We meticulously select premium materials, prioritizing natural and renewable fibers, resulting in designs that transcend trends. All this, coupled with pricing marries exceptional quality and value. Cheng-Fashion represents a blend of high quality and great value, a principle we cherish as we create lasting garments for every woman.
        </p>

        <div class="we-care-grid">
          <div class="we-care-item">
            <div class="we-care-image">
              <a href="/story">
                <img
                  src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161702/20250530161702_6839697eba5a1.webp"
                  alt="MACHINE WASHABLE WOOL" />
              </a>
            </div>
            <div class="we-care-info">
              <h3>MACHINE WASHABLE WOOL</h3>
            </div>
          </div>

          <div class="we-care-item">
            <div class="we-care-image">
              <a href="/story">
                <img
                  src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161715/20250530161715_6839698ba2b2f.webp"
                  alt="PURE CASHMERE" />
              </a>
            </div>
            <div class="we-care-info">
              <h3>PURE CASHMERE</h3>
            </div>
          </div>

          <div class="we-care-item">
            <div class="we-care-image">
              <a href="/story">
                <img
                  src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161743/20250530161743_683969a764d31.webp"
                  alt="90 GOOSE DOWN" />
              </a>
            </div>
            <div class="we-care-info">
              <h3>90 GOOSE DOWN</h3>
            </div>
          </div>

          <div class="we-care-item">
            <div class="we-care-image">
              <a href="/story">
                <img src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161804/20250530161804_683969bc87c48.webp" alt="WASHABLE WOOL" />
              </a>
            </div>
            <div class="we-care-info">
              <h3>WASHABLE WOOL</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// No additional script needed for this component
</script>

<style scoped lang="scss">
.we-care-container {
  background-image: url('https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250606090121/20250606090121_68423de10c03b.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 80px;
}

.we-care-section {
  padding: 60px 0;
  max-width: 80%;
  margin: 0 auto;

}

.section-title {
  text-align: center;
  margin-bottom: 40px;

  h2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #fff;
  }

  .divider {
    width: 50px;
    height: 2px;
    background-color: #fff;
    margin: 0 auto;
  }
}

.we-care-description {
  // max-width: 900px;
  margin: 0 auto 50px;
  // text-align: center;
  // 首行缩进
  text-indent: 4em;
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
}

.we-care-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.we-care-item {
  flex: 1;
  // min-width: 260px;
  // max-width: 280px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

.we-care-image {
  position: relative;
  overflow: hidden;
  // width: 100%;
  // height: 360px;
  margin-bottom: 15px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  &:hover img {
    transform: scale(1.05);
  }
}

.we-care-info {
  text-align: center;

  h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
  }

  p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .we-care-section {
    padding: 50px 20px;
  }
}

@media (max-width: 992px) {
  .we-care-grid {
    justify-content: space-around;
  }

  .we-care-item {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .section-title h2 {
    font-size: 24px;
  }

  .we-care-description {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .we-care-item {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
    min-width: 150px;
  }

  .we-care-image {
    height: 200px;
  }

  .we-care-info h3 {
    font-size: 18px;
  }

  .we-care-info p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .we-care-section {
    padding: 40px 15px;
  }

  .section-title {
    margin-bottom: 25px;
  }

  .we-care-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .we-care-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .we-care-image {
    height: 180px;
  }
}
</style>